<template>
  <vxe-pulldown ref="xDown" id="pullDown" transfer destroy-on-close>
    <template #default>
      <vxe-input
        v-model="inputValue"
        placeholder="请选择父级"
        @change="changeEvent"
        @focus="focusEvent"
        @suffix-click="suffixClick"
        :disabled="disabled">
      </vxe-input>
    </template>
    <template #dropdown>
      <div class="my-dropdown">
        <vxe-grid
          border
          highlight-hover-row
          auto-resize
          height="91%"
          size="mini"
          row-key
          show-overflow="tooltip"
          :loading="loading"
          :data="tableData"
          :columns="tableColumn"
          :tree-config="treeConfig"
          @cell-click="cellClickEvent">
        </vxe-grid>
        <div><vxe-button type="text" @click="getPermissionList"><a-icon type="reload" /></vxe-button></div>
      </div>
    </template>
  </vxe-pulldown>
</template>

<script>
import { permissionList } from '@/api/system'

export default {
  name: 'PullDownTable',
  props: {
    value: {
      type: [String, Number, Object],
      default: null
    },
    disabled: {
      type: [Boolean],
      default: false
    }
  },
  watch: {
  },
  data () {
    return {
      inputValue: '',
      outputValue: '',
      treeConfig: {
        reserve: true,
        transform: true,
        expandAll: true,
        line: true,
        rowField: 'id',
        parentField: 'parentId'
      },
      loading: false,
      tableData: [],
      tableList: [],
      tableColumn: [
        { field: 'id', title: 'id', width: 55 },
        { field: 'name', title: '资源名称', treeNode: true, width: 190 },
        { field: 'type_text', title: '资源类型' }
      ]
    }
  },
  created () {
    // console.log('created', this.value)
    this.getPermissionList()
    // this.changeEvent()
  },
  methods: {
    focusEvent () {
      const { inputValue } = this
      this.$refs.xDown.showPanel()
      this.filterData(inputValue)
    },
    getPermissionList () {
      permissionList().then((res) => {
        console.log('pullDownRes', res)
        const { data, code } = res.data
        if (code === 200) {
          this.tableList = data.records
          const row = this.tableList.filter(row => row.id === this.value)
          console.log(row)
          this.inputValue = row[0].name
        }
      })
    },
    changeEvent (value) {
      const { inputValue } = this
      console.log('value', value)
      console.log('inputValue', inputValue)
      console.log('this.outputValue', this.outputValue)
      this.filterData(inputValue)
      this.$emit('change', this.outputValue)
    },
    suffixClick () {
      this.$refs.xDown.togglePanel()
    },
    cellClickEvent ({ row, triggerTreeNode }) {
      console.log(triggerTreeNode)
      if (triggerTreeNode === true) {
        return
      }
      this.outputValue = row.id
      this.inputValue = row.name
      this.$emit('change', this.outputValue)
      this.$refs.xDown.hidePanel()
    },
    filterData (inputValue) {
      // console.log(inputValue)
      this.loading = true
      setTimeout(() => {
        this.loading = false
        if (inputValue) {
          this.tableData = this.tableList.filter(row => row.name.indexOf(inputValue) > -1)
          console.log('tableData', this.tableData)
        } else {
          this.tableData = this.tableList.slice(0)
        }
      }, 100)
    },
    findNameById (id) {
      if (id) {
        this.tableData = this.tableList.filter(row => row.id.indexOf(id) > -1)
      }
      // this.loading = true
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style lang='less'>
#pullDown {
  width: 100%;
}

.my-dropdown {
  //width: 700px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>
